<template>
	<div class="content">
		<el-card class="box-card">
			<div class="tech-topView row" @click="goBack">
				<i class="el-icon-back" />
				<div class="el-title-text">退款详情</div>
			</div>

			<div class="lb-tips danger">
				<div class="custom-item" v-if="form.auditStatus==0">待退款</div>
				<div class="custom-item" v-if="form.auditStatus==1">同意退款</div>
				<div class="custom-item" v-if="form.auditStatus==2">拒绝退款</div>
			</div>
			<el-form ref="form" :model="form" :rules="rules">
				<div class="lb-goods-edit-classify mb-lg row">
					<div class="title">用户信息</div>
				</div>
				<div class="boxShowWid">
					<div class="row">
						<span class="divOrdTip">用户ID：</span>
						<span class="divOrdTip divOrdRig">{{form.userId}}</span>
					</div>
					<div class="row">
						<span class="divOrdTip">姓名：</span>
						<span class="divOrdTip divOrdRig">{{form.userName}}</span>
					</div>
					<div class="row">
						<span class="divOrdTip">手机号：</span>
						<span class="divOrdTip divOrdRig">{{form.userTel}}</span>
					</div>
					<div class="row">
						<span class="divOrdTip">车费详情：</span>
						<span class="divOrdTip divOrdRig">{{form.modeTravel}} 全程{{form.distance}}km
							车费{{form.orderFarePrice}}</span>
					</div>
					<div class="row">
						<span class="divOrdTip">服务地址：</span>
						<span class="divOrdTip divOrdRig">{{form.addressDetail}}</span>
					</div>
				</div>

				<div class="lb-goods-edit-classify mb-lg row">
					<div class="title">技师信息</div>
				</div>
				<div>
					<div class="row">
						<span class="divOrdTip">技师：</span>
						<span class="divOrdTip divOrdRig">{{form.tname}}</span>
					</div>
					<div class="row">
						<span class="divOrdTip">技术头像：</span>
						<el-form-item prop="tavatar" style="margin: 0;">
							<image-preview :src="form.technicianAvatar" :width="60" :height="60" />
						</el-form-item>
					</div>
					<div class="row">
						<span class="divOrdTip">联系电话：</span>
						<span class="divOrdTip divOrdRig">{{form.technicianTel}}</span>
					</div>
				</div>
				<div class="lb-goods-edit-classify mb-lg row">
					<div class="title">订单信息</div>
				</div>

				<div class="row">
					<span class="divOrdTip">订单号：</span>
					<span class="divOrdTip divOrdRig">{{form.orderNo}}</span>
				</div>
				<div class="row">
					<span class="divOrdTip">申请退款时间：</span>
					<span class="divOrdTip divOrdRig">{{form.createTime}}</span>
				</div>
				<div class="row">
					<span class="divOrdTip">退款原因：</span>
					<span class="divOrdTip divOrdRig">{{form.applyRefundReason}}</span>
				</div>
				<div class="row" v-if="form.auditStatus==0">
					<span class="divOrdTip">处理退款：</span>
					<el-button size="mini" plain type="danger" @click="refundUpdate(1)">拒绝退款</el-button>
					<el-button size="mini" plain type="primary" @click="refundUpdate(2)">立即退款</el-button>
				</div>
				<div class="lb-goods-edit-classify mb-lg row">
					<div class="title">退款服务</div>
				</div>
				<el-table v-loading="loading" :data="seleceTechList" class="elTable">
					<el-table-column label="项目名" align="center" prop="itemName" />
					<el-table-column prop="itemPicture" label="项目图">
						<image-preview :src="form.itemPicture" :width="60" :height="60" />
					</el-table-column>
					</el-table-column>
					<el-table-column label="服务价格" align="center" prop="orderTotalPrice" />
					<el-table-column label="项目时长" align="center" prop="itemTime">
						<template slot-scope="scope">
							{{scope.row.itemTime}}分钟
						</template>
					</el-table-column>
					<el-table-column label="服务数量" align="center" prop="orderNum" />
				</el-table>
				<!-- <div class="divOrdTip">合计数量：1</div> -->
			</el-form>

			<div class="dialog-footer elButt">
				<el-button type="primary" @click="goBack">返 回</el-button>
			</div>
		</el-card>

		<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body center>
			<el-form ref="form" :model="refundForm" :rules="rules" label-width="80px" v-if="digLogType==1">
				<el-form-item label="拒绝原因" prop="falseReason">
					<el-input v-model="refundForm.falseReason" placeholder="请输入拒绝原因" />
				</el-form-item>
			</el-form>

			<el-form ref="form" :model="refundForm" :rules="rules" label-width="80px" v-if="digLogType==2">
				<div class="row">
					<image-preview :src="refundForm.itemPicture" :width="60" :height="60" />
					<div class="formDigles">
						<div class="rowFlex mg-mb">
							<div class="fourName">{{refundForm.itemName}}</div>
							<div class="digTips">待接单</div>
						</div>
						<div class="rowFlex">
							<div class="digTips">￥{{refundForm.orderItemPrice}}</div>
							<div class="fourName">x{{refundForm.orderNum}}</div>
						</div>
					</div>
				</div>

				<div class="row digOrdInp">
					<div class="row">
						<div class="fourName">项目金额：</div>
						<el-input v-model="refundForm.orderItemPrice" size="small" placeholder="请输入"
							style="width: 80px;" />
					</div>
					<div class="fourName digOrdNum">
						退款数量：{{refundForm.orderNum}}
					</div>
				</div>

				<div class="row digOrdInp">
					<div class="fourName row">
						技师车费：
						<el-input v-model="refundForm.orderFarePrice" size="small" placeholder="请输入"
							style="width: 80px;" />
					</div>
				</div>

				<div class="diagePrice">
					总计退款金额：
					<span class="digTips">
						￥{{refundForm.orderItemPrice*refundForm.orderNum+refundForm.orderFarePrice}}
					</span>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm" class="elBut">提 交</el-button>
				<el-button @click="cancel" class="elBut">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getRefundOrder
	} from "@/api/refundOrder/refundOrder";
	import {
		refusOrder,
		agreeOrder
	} from "@/api/refundOrder/refundOrder";
	export default {
		data() {
			return {
				digLogType: '',
				id: '',
				// 遮罩层
				loading: true,
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 表单参数
				form: {},
				refundForm: {},
				// 表单校验
				rules: {},
				seleceTechList: []
			}
		},
		created() {
			this.id = this.$route.query.id
			if (this.id) this.handleUpdate();
		},
		methods: {
			// 表单重置
			reset() {
				this.refundForm = {
					id: null,
					userId: null,
					tid: null,
					refundOrderNo: null,
					orderNo: null,
					applyRefundPrice: null,
					applyRefundItemPrice: null,
					applyRefundFarePrice: null,
					canRefundPrice: null,
					canRefundItemPrice: null,
					canRefundFarePrice: null,
					technicianGet: null,
					applyRefundReason: null,
					addDescription: null,
					userOrderStatus: null,
					technicianOrderStatus: null,
					falseReason: null,
					auditStatus: null,
					itemName: null,
					itemPicture: null,
					itemTime: null,
					orderTotalPrice: null,
					orderItemPrice: null,
					orderFarePrice: null,
					orderNum: null,
					payType: null,
					isDelete: null,
					updateTime: null,
					createTime: null
				};
				this.resetForm("form");
			},
			/** 修改按钮操作 */
			handleUpdate() {
				this.loading = true;
				getRefundOrder(this.id).then(response => {
					this.form = response.data;
					this.seleceTechList.push(this.form)
					this.loading = false;
				});
			},
			/** 修改按钮操作 */
			refundUpdate(index) {
				this.digLogType = index
				getRefundOrder(this.id).then(response => {
					this.refundForm = response.data;
					this.open = true;
					index == 1 ? this.title = "拒绝退款" : this.title = "同意退款"
				});
			},
			/** 提交按钮 */
			submitForm() {
				if (this.digLogType == 1) { //拒绝
					refusOrder({
						id: this.id,
						refuseReason: this.refundForm.falseReason
					}).then(response => {
						this.$modal.msgSuccess("提交成功");
						this.open = false;
						this.handleUpdate();
					});
				}
				if (this.digLogType == 2) { //同意
					agreeOrder({
						id: this.id,
						refundItemPrice: this.refundForm.falseReason,
						refundCarPrice: this.refundForm.refundCarPrice,
						technicianGet: this.refundForm.technicianGet
					}).then(response => {
						this.$modal.msgSuccess("提交成功");
						this.open = false;
						this.handleUpdate();
					});
				}
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			goBack() {
				this.$commonJs.backRou()
			},
		}
	}
</script>

<style lang="less" scoped>
	.box-card {
		margin: 20px;

		.mb-lg {
			margin-bottom: 15px;
		}
	}

	.tech-topView {
		border-bottom: 1px solid #e1e1e1;
		padding-bottom: 10px;

		.el-title-text {
			font-size: 14px;
			color: #666;
			margin-left: 10px;
		}
	}

	.danger {
		border-left: 5px solid #fe6c6f;
		background: #fff6f7;
	}

	.lb-tips {
		width: 100%;
		padding: 20px;
		border-radius: 4px;
		margin: 16px 0;

		.custom-item {
			flex: 1;
			font-size: 14px;
			color: #666;
		}
	}

	.lb-goods-edit-classify {
		width: 100%;
		border-top: 1px solid #eff2f6;
		display: -webkit-box;
		display: -ms-flexbox;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;

		.title {
			display: inline-block;
			padding: 6px 15px;
			color: #609beb;
			background: #f5f7fa;
			margin-right: 10px;
			font-size: 14px;
		}
	}



	.divOrdTip {
		width: 120px;
		text-align: right;
		font-size: 12px;
		color: #606266;
		line-height: 40px;
		padding: 0 12px 0 0;
		display: block;
	}

	.divOrdRig {
		width: 50%;
		color: #333;
		text-align: left;
	}

	.elTable {
		margin-bottom: 20px;
	}

	.elButt {
		margin-top: 20px;
	}

	.formDigles {
		flex: 1;
		margin-left: 10px;

		.mg-mb {
			margin-bottom: 16px;
		}
	}

	.digOrdInp {
		margin: 10px 0;
		font-size: 12px;

		.digOrdNum {
			margin-left: 20px;
		}

		.fourName {
			color: #444;
		}


	}

	.diagePrice {
		font-size: 12px;
		color: #444;
		border-top: 1px dashed #eee;
		padding-top: 20px;
	}

	.digTips {
		color: #f12c20;
		font-size: 12px;
	}
</style>